<template>
  <div class="main">
    <div class="function" @tap="switchPage('/pages/letter/letter')">
      <image
        mode="widthFix"
        class="cover"
        src="../../static/icons/letter.png"
      ></image>
      <div class="title">寄信、照片、手写信、单据证件</div>
      <button class="btn btn1">在线寄信</button>
    </div>
    <div class="function">
      <image
        mode="widthFix"
        class="cover"
        src="../../static/icons/photo.png"
      ></image>
      <div class="title">可用照片作明信片</div>
      <button
        class="btn btn2"
        @click="switchPage('/pages/letter/postcard-letter')"
      >
        寄明信片
      </button>
    </div>
    <div class="function">
      <image
        mode="widthFix"
        class="cover"
        src="../../static/icons/goods.png"
      ></image>
      <div class="title">我的商城</div>
      <button
        class="btn btn3"
        @click="switchPage('/pages/product/product-list?type=home')"
      >
        飞鸽商城
      </button>
    </div>
  </div>
</template>

<script lang="ts">
import { invited } from "@/api/invite";
import Vue from "vue";
import { mapState } from "vuex";

export default Vue.extend({
  computed: {
    ...mapState("user", ["userInfo", "invitorId"]),
  },
  onLoad() {
    this.$store.dispatch("user/getUserInfo");
    if (this.invitorId > 0) {
      invited(this.invitorId);
    }
  },
  methods: {
    switchPage(url: string) {
      let statementPage =
        "/pages/statement/statement?url=" + encodeURIComponent(url);
      uni.navigateTo({ url: statementPage });
    },
  },
});
</script>
<style scoped lang="scss">
.function {
  margin: 50rpx 30rpx 30rpx 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  .cover {
    width: 180rpx;
  }
  .title {
    margin-top: 10rpx;
    font-size: 34rpx;
    color: rgba($color: #000000, $alpha: 0.9);
  }
  .btn {
    width: 300rpx;
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 40rpx;
    margin-top: 30rpx;
    border: 0;
    font-size: 30rpx;
    color: white;
    box-shadow: 10rpx 10rpx 15rpx rgb(245, 245, 245);
    background-color: rgb(0, 170, 255);
    &.btn1 {
      background-color: rgb(46, 191, 118);
    }
    &.btn2 {
      background-color: rgb(255, 163, 52);
    }
    &.btn3 {
      background-color: rgb(243, 82, 48);
    }
  }
}
</style>
